<template>
	<view>


		<view class="sales">
			<view class="salesLeft f32 c333" @click="ClickBody(1)" :class="{ bord: stype === 1 ? bord : '' }">库存及销量</view>
			<view class="salesRight f32 c333" @click="ClickGoods(2)" :class="{ bord: stype === 2 ? bord : '' }">货品预览</view>
		</view>
		<view class="bodyTwo" v-show="ShowGoods"><Goods></Goods></view>
		<view class="body" v-show="ShowBody">
			<view class="shop">
				<view class="shopTop">
					<view class="">编码：{{ goodInfo.goods_no }}</view>
					<view class="f26 black">上架日期：{{ goodInfo.create_time | birtime }}</view>
				</view>
				<view class="shopCenter">
					<view class="box">
					<view class="pic"><dimg :src="goodInfo.cover"></dimg></view>
						</view>
					<view class="txt">
						<view class="f32">{{goodInfo.title}}</view>
						<view class="f28">库存：{{ totalStock }}</view>
						<view class="f28 money">
							<view class="">销量：{{ totalSales }}</view>
							<view class="f36 red" v-if="minPrice == maxPrice">¥{{ minPrice }}</view>
							<view class="f36 red" v-if="minPrice != maxPrice">¥{{ minPrice }}~¥{{ maxPrice }}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="customer">
				<view class="customerLeft" @click="clickKu(1)" :class="{ blue: typeTwo == 1 ? 'blue' : '' }">库存及欠货</view>
				<view class="customerRight" @click="clickQu(2)" :class="{ blue: typeTwo == 2 ? 'blue' : '' }">销售趋势</view>
				<view class="customerRight" @click="clickGo(3)" :class="{ blue: typeTwo == 3 ? 'blue' : '' }">购买客户</view>
			</view>
			<view class="ku" v-show="showKu">
				<view class="top">
					<view class="topLeft">库存及欠货明细</view>
					<view class="topRight">总库存:{{ totalStock }} 总欠货:{{ totalOwe }}</view>
				</view>
				<view class="center">
					<view class="centerTop">
						<view class="">规格（¥）</view>
						<view class="">库存</view>
						<view class="">销量（欠货）</view>
					</view>
				<view class="centerBot" v-for="(item, index) in productList" :key="index">
					<view class="product-item">
						<block v-for="(val, index) in item.spec_data" :key="index">
							{{ val }}
							<block v-if="index < item.spec_data.length - 1">/</block>
						</block>
					</view>
					<view class="product-item">{{ item.store_num }}</view>
					<view class="product-item">{{ item.sale_num }}({{ item.owe_num }})</view>
				</view>
				</view>
		</view>
			<view class="qushi" v-show="showqu">
				<view>
					<histogram-chart
						:dataAs="histogramData2"
						canvasId="ht1"
						labelKey="label"
						valueKey="value"
						:yAxisAs="{
							formatter: {
								type: 'percent' //type:number percent String,额外参数:fixed:NUmber,name:String
							}
						}"
					/>
					<view style="text-align: center;line-height: 40px;"></view>
				</view>
			</view>
			<!-- 购买商品列表 -->
	<view class="shoping" v-show="showGo">
		<view class="shopingTop">购买了此商品的客户</view>
		
		<view class="shopingCe" v-for="(item, index) in purchaseList" :key="index" @tap="goDetail(item)">
			<view class="left">
				<view class="imas">{{ item.customer_name.charAt(0) }}</view>
				<view class="f30 txt">{{ item.customer_name }}</view>
			</view>
			<view class="right">
				<view class="txttwo">销售数量：{{ item.sale_num }}</view>
				<view class="txtThree"><image src="../../static/images/arrow_right.png" mode=""></image></view>
			</view>
		</view>
		<!-- 暂无数据 -->
		<view class="ima" v-if="purchaseList.length == 0"><image src="../../static/slice/86438f8f6d0029f503d57efb448590f.png" mode="aspectFit"></image></view>
	</view>

			<!-- 	欠货订单列表 -->

			<view class="backorder" v-if="orderList.length != 0">
				<view class="tit f32 c333">欠货订单</view>

				<view class="orderList">
					<view class="order-item" v-for="(item, index) in orderList" :key="index" @click="goDetails(item)">
						<view class="order-top">
							<view class="orderNum f30 c333">订单号：{{ item.order_no }}</view>
							<view class="ding f28 cfff">订</view>
						</view>
						<view class="order-bottom">
							<view class="info">
								<view class="title">
									<view class="name f30 c333">{{ item.customer_name }}</view>
									<view class="f30">欠货：{{ item.owe_num }}</view>
								</view>
								<view class="time f28 c333">{{ item.create_time | birtime }}</view>
							</view>
							<view class="box">
								<view class="price f28 c333">订单金额：{{ item.order_sum }}</view>
								<view class="billing  f28 c333">开单：{{ item.order_num }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		<!-- 分享导航开始 -->
			<uni-popup ref="showshare" :type="type" >
				<view class="uni-share">
					<text class="uni-share-title">选择要分享到的平台</text>
					<view class="uni-share-content">
						<view v-for="(item, index) in bottomData" :key="index" class="uni-share-content-box" @tap="share(item.name)">
							<view class="uni-share-content-image">
								<image :src="item.icon" class="content-image" mode="widthFix" />
							</view>
							<text class="uni-share-content-text">{{ item.text }}</text>
						</view>
					</view>
					<text class="uni-share-btn" @click="cancel('share')">取消分享</text>
				</view>
			</uni-popup>
			
			<!-- 分享导航结束 -->
			<view style="height: 150upx;"></view>
	
			<view class="tarbar">
				<view class="tarbarOne" @click="togglePopup('bottom', 'share')">
					<image src="../../static/shopImage/chaxun.png" mode=""></image>
					推广
				</view>
				<view class="tarbarOne" @tap="$open('../stock/stock')">
					<image src="../../static/shopImage/sousuo.png" mode=""></image>
					库存查询
				</view>
				<view class="tarbarOne" @tap="$open('../specification/qr')">
					<image src="../../static/shopImage/erweima.png" mode=""></image>
					二维码
				</view>
			</view>
		</view>
		<view class="meng" v-show="meng"></view>
	</view>
</template>

<script>
import Goods from './Goodstopreview';
import HistogramChart from '@/components/stan-ucharts/HistogramChart.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue'
export default {
	name: 'Index',
	components: { Goods, HistogramChart },
	data() {
		return {
			blue: true,
			bord: true,
			stype: 1,
			type:'',
			typeTwo: 1,
			ShowGoods: false,
			ShowBody: true,
			showKu: true,
			showGo: false,
			ImageShop: '../../static/images/xiajia.png', //../../static/shopImage/timg.jpg
			ShowdowLoad: false,
			meng: false,
			showqu: false,
			name: 'Index',
			goodId: '', //商品id
			orderList: [],
			goodInfo: '',
			productList: [],
			bottomData: [{
				text: '微信',
				icon: '../../static/icon_weixin.png',
				name: 'WXSceneSession'
			}, {
				text: '微信朋友圈',
				icon: '../../static/icon_friends.png',
				name: 'WXSenceTimeline'
			},
			{
				text: '微信收藏',
				icon: '../../static/icon_collect.png',
				name: 'WXSceneFavorite'
			},
			],
			minPrice: '',
			maxPrice: '',
			totalStock: 0, //总库存
			totalSales: 0, //总销量
			totalOwe: 0, //总欠货
			purchaseList:[],
			histogramData2: {
				//柱状图Compent  //label应为series value 应为
				label: ['', '', '', '', ''],
				value: [
					{
						name: '销售趋势明细（销售金额）',
						data: [50, 100, 150, 200, 250]
					}
				]
			}
		};
	},
	onLoad(option) {
		this.goodId = option.id;
		this.getOweOrder();
		this.getGoodInfo();
		this.getpurchaseInfo();
	},
	methods: {
		ClickGoods() {
			this.$sToast('暂未开通');
		},
		// ClickGoods(e) {
		// 	this.stype = e;
		// 	this.ShowGoods = true;
		// 	this.ShowBody = false;
		// },
		ClickBody(e) {
			this.stype = e;
			(this.ShowGoods = false), (this.ShowBody = true);
		},
		clickKu(e) {
			this.typeTwo = e;
			(this.showKu = true), (this.showGo = false), (this.showqu = false);
		},
		clickGo(e) {
			this.typeTwo = e;
			(this.showKu = false), (this.showGo = true), (this.showqu = false);
		},
		clickQu(e) {
			this.typeTwo = e;
			(this.showKu = false), (this.showGo = false), (this.showqu = true);
		},
		ShowDian() {
			(this.ShowdowLoad = true), (this.meng = true);
		},

		closeDian() {
			(this.ShowdowLoad = false), (this.meng = false);
		},
		getLocalTime(nS) {
			return new Date(parseInt(nS) * 1000).toLocaleString().substr(0, 17);
		},
		share(type) {
			uni.share({
				provider: type,
				scene: 'WXSceneSession',
				href: "http://uniapp.dcloud.io/",
				type: 1,
				summary: '分享成功',
				success: function(res) {
					uni.showToast({
						title: '分享成功',
						icon:'none'
					});
				},
				fail: function(err) {
					uni.showToast({
						title: '分享失败',
						icon:'none'
					});
				}
			});
		},
		togglePopup(type, open) {
			switch (type) {
				case 'top':
					this.content = '顶部弹出 popup'
					break
				case 'bottom':
					this.content = '底部弹出 popup'
					break
				case '	bottom1':
					this.content = '底部弹出 popup'
					break
				case 'center':
					break
			}
			this.type = type
			this.$nextTick(() => {
				this.$refs['show' + open].open()
			})
		},
		cancel(type) {
			this.$refs['show' + type].close()
		},

	//商品详情
		
		getGoodInfo() {
			let that = this;
			that.$ajax('api/v2.goods/info', {
				goods_id: this.goodId
			})
				.then(res => {
					if (res.code == 1) {
						that.goodInfo = res.result;
						that.minPrice = res.result.min_price;
						that.maxPrice = res.result.max_price;
						that.productList = res.result.product_list;
						console.log(that.productList);
						let c=[]
						this.productList.forEach(item=>{
							c.push(item.trade_sum)
						})
						
						// console.log(c);
					this.histogramData2.value[0].data=c
					
					
						that.productList.forEach(item => {
							that.totalStock += item.store_num;
							that.totalSales += item.sale_num;
							that.totalOwe += item.owe_num;
						});
		
						if (that.minPrice == that.maxPrice) {
							that.minPrice = that.maxPrice;
						}
						if (that.minPrice != that.maxPrice) {
							that.minPrice = that.minPrice;
							that.maxPrice = that.maxPrice;
						}
					}
				})
				.catch(res => {
					that.$sToast(res.message);
				});
		},

	//货品购买客户获取
		getpurchaseInfo() {
			let that = this;
			that.$ajax('api/v1.goods/purchaseCustomer', {
				goods_id: this.goodId
			})
				.then(res => {
					if (res.code == 1) {
						that.purchaseList = res.result.page_list;
					}
				})
				.catch(res => {
					that.$sToast(res.message);
				});
		},
		//相关商品的欠货订单
		getOweOrder() {
			let that = this;
			that.$ajax('api/v1.goods/oweOrder', {
				goods_id: this.goodId
			}) 
				.then(res => {
					if (res.code == 1) {
						that.orderList = res.result.page_list;
					}
				})
				.catch(res => {
					that.$sToast(res.message);
				});
		},
		goDetail(e) {
			uni.navigateTo({
				url: '../clientservice/clientPage?id=' + JSON.stringify(e)
			});
		},
		goDetails(item) {
			// console.log(123);
			uni.navigateTo({
				url: '../clientservice/Details'
			});
			uni.setStorage({
				key: 'line',
				data: item
			});
		},
	}
};
</script>

<style lang="scss">
page {
	background-color: #f7f4f8;
}
.header {
	position: relative;
	height: 88rpx;
	background-color: #249af6;
	padding: 24rpx 30rpx;
	display: flex;
	justify-content: center;
	box-sizing: border-box;
	color: #ffffff;
	image {
		width: 22rpx;
		height: 39rpx;
	}
	.headRight {
		image {
			position: relative;
			top: -10rpx;
			width: 48rpx;
			height: 10rpx;
		}
	}
}
.sales {
	height: 95rpx;
	line-height: 95rpx;
	background-color: #ffffff;
	display: flex;
	justify-content: space-between;
	text-align: center;
	margin-bottom: 20rpx;
	.salesLeft {
		width: 49%;
	}
	.salesRight {
		width: 49%;
	}
}
.bord {
	border-bottom: 6rpx solid #249AF6;
}
.body {
	.shop {
		height: 276rpx;
		background-color: #ffffff;
		padding: 40rpx 30rpx;
		box-sizing: border-box;
		.shopTop {
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
		}
		.shopCenter {
			display: flex;
			margin-top: 18rpx;
			line-height: 52rpx;
           .box{
			   .pic {
					margin-right: 30upx;
			   	image {
			   		width: 150upx;
			   		height: 150upx;
			   	}
			   }
		   }
			image {
				width: 150rpx;
				height: 150rpx;
			}
			.txt {
				width: 100%;
				.money {
					display: flex;
					justify-content: space-between;
				}
			}
		}
	}
}
.black {
	color: rgba(102, 102, 102, 1);
}
.red {
	color: #f64444;
}
.customer {
	height: 80rpx;
	line-height: 80rpx;
	margin-top: 20rpx;
	display: flex;
	text-align: center;
	background-color: #ffffff;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	.customerLeft {
		width: 50%;
	}
	.customerRight {
		width: 50%;
	}
}
.blue {
	color: rgba(255, 255, 255, 1);
	background: rgba(36, 154, 246, 1);
}
.ku {
	padding-bottom: 10rpx;
	background-color: #ffffff;
	margin-top: 20rpx;
	.top {
		height: 103rpx;
		line-height: 103rpx;
		border-bottom: 2rpx solid #eeeeee;
		display: flex;
		justify-content: space-between;
		.topLeft {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			margin-left: 30rpx;
		}

		.topRight {
			margin-right: 33rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(36, 154, 246, 1);
		}
	}
	.center {
		.centerTop {
			font-size: 32rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 35rpx;
			margin-bottom: 10upx;
			view{
				width: 33.333%;
				text-align: center;
			}
		}
		.centerBot {
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-size: 30rpx;
			font-family: PingFang SC;
			color: rgba(102, 102, 102, 1);
			.product-item {
			width: 33.333%;
			text-align: center;
			margin: 15upx 0;
			}
		}
	}
}
.shoping {
	.shopingTop {
		font-size: 32rpx;
		height: 111rpx;
		line-height: 111rpx;
		padding-left: 34rpx;
	}
	.shopingCe {
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 150rpx;
		background-color: #ffffff;
		padding: 30rpx;
		box-sizing: border-box;
		.left {
			width: 100%;
			display: flex;
			flex-direction: row;
			.txt {
				width: 80%;
				line-height: 90upx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
		.right {
			width: 40%;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;

			.txttwo {
				font-size: 28rpx;
				line-height: 90upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(36, 154, 246, 1);
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.txtThree {
				margin-left: 25rpx;
				image {
					width: 18rpx;
					height: 33rpx;
					position: relative;
					top: 20rpx;
				}
			}
		}

		.imas {
			width: 90rpx;
			height: 90rpx;
			line-height: 90rpx;
			background-color: #249AF6;
			text-align: center;
			border-radius: 50%;
			overflow: hidden;
			color: #ffffff;
			margin-right: 25upx;
			image {
				width: 90rpx;
				height: 90rpx;
			}
		}
	}
}
.tarbar {
	width: 100%;
	height: 110rpx;
	position: fixed;
	bottom: 0;
	background-color: #ffffff;
	display: flex;
	flex-direction: row;
	align-items: center;
	box-sizing: border-box;
	.tarbarOne {
		margin-top: 35rpx;
		margin-bottom: 35rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 33.33%;
		text-align: center;
		font-size: 30rpx;
		color: #666;
		border-right: 2rpx solid #eee;
		padding: 10rpx 0;
		image {
			margin-right: 20rpx;
			width: 40rpx;
			height: 40rpx;
			vertical-align: middle;
		}
	}
}
.mengblack {
	background-color: #000000;
	opacity: 0.7;
	z-index: 2;
}
.dowLoad {
	width: 210rpx;
	height: 230rpx;
	background-color: #ffffff;
	z-index: 3;
	position: absolute;
	bottom: -230rpx;
	right: 29rpx;
	.dowLoadTop {
		height: 50%;
		border-bottom: 3rpx solid #cccccc;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		image {
			width: 48rpx;
			height: 44rpx;
			margin: 33rpx 35rpx;
			vertical-align: middle;
		}
	}
}
.meng {
	width: 100%;
	height: 100%;
	background-color: #000000;
	opacity: 0.7;
	position: fixed;
	top: 0;
}

// 欠货订单列表
.backorder {
	margin-bottom: 170upx;
	.tit {
		margin: 25upx 30upx;
	}
	.orderList {
		.order-item {
			padding: 30upx 0 10upx;
			margin-bottom: 20upx;
			background-color: $white-background;
			.order-top {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				border-bottom: 2upx #eee solid;
				padding: 0 30upx 30upx;
				.ding {
					width: 40upx;
					height: 40upx;
					background: rgba(36, 154, 246, 1);
					border-radius: 5upx;
					text-align: center;
				}
			}
			.order-bottom {
				.info {
					padding: 30upx 0 30upx 0;
					border-bottom: 2upx #f0f0f0 solid;
					.title {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						padding: 0 30upx 20upx;
					}
					.time {
						padding: 0 30upx;
					}
				}
				.box {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					padding: 25upx 30upx 30upx;
				}
			}
		}
	}
}
/* 底部分享 */
	.share {
	position: absolute;
	right: 30upx;
		image {
			width: 40upx;
			height:40upx;
			vertical-align: middle;
		}
	}
	.uni-share {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		background-color: #fff;
	}

	.uni-share-title {
		line-height: 60rpx;
		font-size: 30rpx;
		padding: 15rpx 0;
		text-align: center;
		background-color: #eaeff3;
	}

	.uni-share-content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 15px;
		background-color: #eaeff3;
	}

	.uni-share-content-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		width: 200rpx;
	}

	.uni-share-content-image {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 80rpx;
		height: 80rpx;
		overflow: hidden;
	}

	.content-image {
		width: 60rpx;
		height: 60rpx;
	}

	.uni-share-content-text {
		font-size: 24rpx;
		color: #333;
		padding-top: 5px;
		padding-bottom: 10px;
	}

	.uni-share-btn {
		height: 90rpx;
		line-height: 90rpx;
		font-size: 14px;
		border-top-color: #f5f5f5;
		border-top-width: 1px;
		border-top-style: solid;
		text-align: center;
		color: #666;
	}
</style>
